<template>
  <div class="page-home">
    <header>
      <h2>DoorUI 组件库</h2>
      <ul class="component-list">
        <li
          v-for="(item, index) in componentList"
          :key="`doorComponent_${index}`"
          :class="{'active': item === curComponent}"
          class="component-list-item"
          @click="chooseCurrentComponent(item)"
        >{{ index + 1 }}. {{ item }}</li>
      </ul>
    </header>
    <main>
      <input-demo v-if="curComponent === 'input'"></input-demo>
      <button-demo v-if="curComponent === 'button'"></button-demo>
      <grid-demo v-if="curComponent === 'grid'"></grid-demo>
      <icon-demo v-if="curComponent === 'icon'"></icon-demo>
      <color-demo v-if="curComponent === 'color'"></color-demo>
      <extend-demo v-if="curComponent === 'extend扩展'"></extend-demo>
      <number-input-demo v-if="curComponent === 'numberInput'"></number-input-demo>
      <tag-input-demo v-if="curComponent === 'tagInput'"></tag-input-demo>
      <search-demo v-if="curComponent === 'search'"></search-demo>
      <switch-demo v-if="curComponent === 'switch'"></switch-demo>
      <switch-list-demo v-if="curComponent === 'switchList'"></switch-list-demo>
      <radio-demo v-if="curComponent === 'radio'"></radio-demo>
      <checkbox-demo v-if="curComponent === 'checkbox'"></checkbox-demo>
      <select-demo v-if="curComponent === 'select'"></select-demo>
      <slider-demo v-if="curComponent === 'slider'"></slider-demo>
      <rate-demo v-if="curComponent === 'rate'"></rate-demo>
      <form-demo v-if="curComponent === 'form'"></form-demo>
      <modal-demo v-if="curComponent === 'modal'"></modal-demo>
      <message-demo v-if="curComponent === 'message'"></message-demo>
      <notice-demo v-if="curComponent === 'notice'"></notice-demo>
      <tooltip-demo v-if="curComponent === 'tooltip'"></tooltip-demo>
      <poptip-demo v-if="curComponent === 'poptip'"></poptip-demo>
      <pagination-demo v-if="curComponent === 'pagination'"></pagination-demo>
      <tabs-demo v-if="curComponent === 'tabs'"></tabs-demo>
      <menu-demo v-if="curComponent === 'menu'"></menu-demo>
      <breadcrumb-demo v-if="curComponent === 'breadcrumb'"></breadcrumb-demo>
      <table-demo v-if="curComponent === 'table'"></table-demo>
      <loading-demo v-if="curComponent === 'loading'"></loading-demo>
      <date-picker-demo v-if="curComponent === 'datePicker'"></date-picker-demo>
      <time-picker-demo v-if="curComponent === 'timePicker'"></time-picker-demo>
      <datetime-picker-demo v-if="curComponent === 'datetimePicker'"></datetime-picker-demo>
      <tree-demo v-if="curComponent === 'tree'"></tree-demo>
      <auto-complete-demo v-if="curComponent === 'autoComplete'"></auto-complete-demo>
      <layout-demo v-if="curComponent === 'layout'"></layout-demo>
      <dropdown-custom-demo v-if="curComponent === 'dropdownCustom'"></dropdown-custom-demo>
      <uploader-demo v-if="curComponent === 'uploader'"></uploader-demo>
      <progress-demo v-if="curComponent === 'progress'"></progress-demo>
      <circle-demo v-if="curComponent === 'circle'"></circle-demo>
      <image-preview-demo v-if="curComponent === 'imagePreview'"></image-preview-demo>
      <avatar-demo v-if="curComponent === 'avatar'"></avatar-demo>
      <badge-demo v-if="curComponent === 'badge'"></badge-demo>
      <timeline-demo v-if="curComponent === 'timeline'"></timeline-demo>
      <transfer-demo v-if="curComponent === 'transfer'"></transfer-demo>
      <affix-demo v-if="curComponent === 'affix'"></affix-demo>
      <tag-demo v-if="curComponent === 'tag'"></tag-demo>
      <steps-demo v-if="curComponent === 'steps'"></steps-demo>
      <loading-bar-demo v-if="curComponent === 'loadingBar'"></loading-bar-demo>
      <collapse-demo v-if="curComponent === 'collapse'"></collapse-demo>
      <div v-if="isDev">
        <notify-demo v-if="curComponent === 'notify'"></notify-demo>
      </div>
    </main>
  </div>
</template>

<script>
import gridDemo from './components/gridDemo'
import iconDemo from './components/iconDemo'
import colorDemo from './components/colorDemo'
import extendDemo from './components/extendDemo'
import inputDemo from './components/inputDemo'
import buttonDemo from './components/buttonDemo'
import numberInputDemo from './components/numberInputDemo'
import tagInputDemo from './components/tagInputDemo'
import searchDemo from './components/searchDemo'
import switchDemo from './components/switchDemo'
import switchListDemo from './components/switchListDemo'
import radioDemo from './components/radioDemo'
import checkboxDemo from './components/checkboxDemo'
import selectDemo from './components/selectDemo'
import sliderDemo from './components/sliderDemo'
import rateDemo from './components/rateDemo'
import formDemo from './components/formDemo/index'
import notifyDemo from './components/notifyDemo'
import modalDemo from './components/modalDemo'
import messageDemo from './components/messageDemo'
import noticeDemo from './components/noticeDemo'
import tooltipDemo from './components/tooltipDemo'
import poptipDemo from './components/poptipDemo'
import paginationDemo from './components/paginationDemo'
import tabsDemo from './components/tabsDemo'
import menuDemo from './components/menuDemo'
import breadcrumbDemo from './components/breadcrumbDemo'
import tableDemo from './components/tableDemo'
import loadingDemo from './components/loadingDemo'
import datePickerDemo from './components/datePickerAllDemo/datePickerDemo'
import timePickerDemo from './components/datePickerAllDemo/timePickerDemo'
import datetimePickerDemo from './components/datePickerAllDemo/datetimePickerDemo'
import treeDemo from './components/treeDemo'
import autoCompleteDemo from './components/autoCompleteDemo'
import layoutDemo from './components/layoutDemo'
import dropdownCustomDemo from './components/dropdownCustomDemo'
import uploaderDemo from './components/uploaderDemo'
import progressDemo from './components/progressDemo'
import circleDemo from './components/circleDemo'
import imagePreviewDemo from './components/imagePreviewDemo'
import avatarDemo from './components/avatarDemo'
import badgeDemo from './components/badgeDemo'
import timelineDemo from './components/timelineDemo'
import transferDemo from './components/transferDemo'
import affixDemo from './components/affixDemo'
import tagDemo from './components/tagDemo'
import stepsDemo from './components/stepsDemo'
import loadingBarDemo from './components/loadingBarDemo'
import collapseDemo from './components/collapseDemo'

export default {
  name: 'Home',
  components: {
    gridDemo,
    iconDemo,
    colorDemo,
    extendDemo,
    inputDemo,
    buttonDemo,
    numberInputDemo,
    tagInputDemo,
    searchDemo,
    switchDemo,
    switchListDemo,
    radioDemo,
    checkboxDemo,
    selectDemo,
    sliderDemo,
    rateDemo,
    formDemo,
    notifyDemo,
    modalDemo,
    messageDemo,
    noticeDemo,
    tooltipDemo,
    poptipDemo,
    paginationDemo,
    tabsDemo,
    menuDemo,
    breadcrumbDemo,
    tableDemo,
    loadingDemo,
    datePickerDemo,
    timePickerDemo,
    datetimePickerDemo,
    treeDemo,
    autoCompleteDemo,
    layoutDemo,
    dropdownCustomDemo,
    uploaderDemo,
    progressDemo,
    circleDemo,
    imagePreviewDemo,
    avatarDemo,
    badgeDemo,
    timelineDemo,
    transferDemo,
    affixDemo,
    tagDemo,
    stepsDemo,
    loadingBarDemo,
    collapseDemo
  },
  data () {
    return {
      curComponent: 'collapse',
      componentList: [
        'input', 'button', 'grid', 'icon', 'color', 'extend扩展', 'numberInput', 'tagInput', 'search', 'switch',
        'switchList', 'radio', 'checkbox', 'select', 'slider', 'rate', 'form', 'modal', 'message', 'notice',
        'tooltip', 'poptip', 'pagination', 'tabs', 'menu', 'breadcrumb', 'table', 'loading', 'datePicker', 'timePicker',
        'datetimePicker', 'tree', 'autoComplete', 'layout', 'dropdownCustom', 'uploader', 'progress', 'circle', 'imagePreview',
        'avatar', 'badge', 'timeline', 'transfer', 'affix', 'tag', 'steps', 'loadingBar', 'collapse'
      ]
    }
  },
  computed: {
    isDev () {
      return process.env.NODE_ENV === 'development'
    }
  },
  mounted () {
    const componentDevList = ['notify']
    if (this.isDev) {
      this.componentList = this.componentList.concat(componentDevList)
    }
  },
  methods: {
    chooseCurrentComponent (item) {
      this.curComponent = item
    }
  }
}
</script>

<style lang="stylus">
.page-home
  width 950px
  margin 7vh auto
  .component-list
    margin 10px 0 30px
    .component-list-item
      display inline-block
      margin 15px 15px 0 0
      cursor pointer
      &.active
        color #4caf50
        font-weight bold
  p
    margin 10px 0
    word-break break-word
</style>
